<template>
  <div>
    <div style="display: flex;margin-top: 0px;">
      <el-card shadow="always" class="item">
        <div id="echarts" style="width: 90%;height: 500px;">

        </div>
      </el-card>
      <el-card style="margin-left: 20px;" shadow="always" class="item">
        <div id="myEcharts" style="width: 100%;height: 500px;">

        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      newsDataList: [],
      newsType: ['国内时事', '国际动态', '娱乐八卦', '轻松搞笑', '政治报道']
    }
  },
  computed: {
    getNewsType(tid) {
      return function (tid) {
        return this.newsType[tid - 1]
      }
    }
  },
  methods: {
    // 初始化新闻发布量echarts
    initEcharts() {

      //初始化echarts实例对象
      let myEchart = echarts.init(document.getElementById("echarts"))
      // 配置对象
      let option = {

        legend: {
          orient: 'vertical',//图例方向，垂直
          left: 'left'
        },
        tooltip: {
          trigger: 'item'//鼠标放上去的时候的提示内容
        },
        title: {
          text: '新闻发布数据统计',
          left: "center"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '发布数量',
            type: 'pie',
            radius: "70%",
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '国内时事' },
              { value: 38, name: '国际动态' },
              { value: 32, name: '娱乐八卦' },
              { value: 30, name: '轻松搞笑' },
              { value: 28, name: '政治报道' }
            ]
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      };
      myEchart.setOption(option);
      // 使用刚指定的配置项和数据显示图表。
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myEcharts"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "用户统计",
          left: 'center'
        },
        tooltip: {
          trigger: 'item'//鼠标放上去的时候的提示内容
        },
        legend: {
          orient: 'vertical',//图例方向，垂直
          left: 'left'
        },

        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "",
            type: "pie",//图标类型
            radius: '60%',
            label: {
              normal: {
                formatter: '{b}({d}%)',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 13
                }
              }
            },
            data: [{
              value: 2, name: '新闻发布者'
            }, {
              value: 5, name: '普通用户'
            }]
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);



    }
  },
  mounted() {
    this.initEcharts()
    this.drawChart()
  }
}
</script>

<style>
.item {
  flex: 1;
}
</style>